<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>俗谣雅玖-个人中心</title>
		<link href="${pageContext.request.contextPath}/images/logo.ico" rel="icon" type="image/x-ico">

		<!-- Mobile Specific Metas
        ================================================== -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="keywords" content="">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
		<!-- //for-mobile-apps -->
		<!-- js -->
		<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min1.js"></script>
		<!-- //js -->
		<link href="${pageContext.request.contextPath}/css/style2.css" rel="stylesheet" type="text/css" media="all">
		<!-- CSS
        ================================================== -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css1/zerogrid.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css1/style.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css1/lightbox.css">

		<!-- Custom Fonts -->
		<link href="${pageContext.request.contextPath}/css1/font-awesome.min.css" rel="stylesheet" type="text/css">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/css1/menu.css">
		<script src="${pageContext.request.contextPath}/js1/jquery1111.min.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js1/script.js"></script>

		<!-- Owl Carousel Assets -->
		<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
		<!-- <link href="owl-carousel/owl.theme.css" rel="stylesheet"> -->

		<!--[if lt IE 8]>
		<div style=' clear: both; text-align:center; position: relative;'>
			<a href="http://windows.microsoft.com/en-US/internet-explorer/Items/ie/home?ocid=ie6_countdown_bannercode">
				<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
			</a>
		</div>
		<![endif]-->
		<!--[if lt IE 9]>
		<script src="${pageContext.request.contextPath}/js/html5.js"></script>
		<script src="${pageContext.request.contextPath}/js/css3-mediaqueries.js"></script>
		<![endif]-->

	</head>

	<body>
	<div class="wrap-body">
		<div class="header">
			<div class="header">
				<div id='cssmenu' class="align-right">
					<ul>
						<li class="active">
							<a href='${pageContext.request.contextPath}/product/pageProduct.do'><span>心动</span></a>
						</li>
						<c:choose>
							<c:when test="${empty user}">
								<li>
									<a href="${pageContext.request.contextPath}/suyaoyajiu/login.jsp">登录</a>
								</li>
							</c:when>
							<c:otherwise>
								<li><a href="${pageContext.request.contextPath}/tiaozhuan.do">个人中心</a> </li>
								<li><a href="${pageContext.request.contextPath}/logout.do">用户退出</a> </li>
							</c:otherwise>
						</c:choose>
						<li class='last'>
							<a href="http://wpa.qq.com/msgrd?v=3&uin=1013042589&site=qq&menu=yes"><span>联系</span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		</div>
	<div class="main">

		<div class="w3l_main_grid">
			<div class="w3l_main_grid1">
				<div class="w3l_main_grid1_left">
					<img src="/images/edit.png" style="width: 20px; height: 20px;"
					 class="img-responsive" onclick="window.location.href='${pageContext.request.contextPath}/suyaoyajiu/edit.jsp'">
				</div>
				<div class="w3l_main_grid1_right">
					<div class="menu">


						<!-- script-for-menu -->
						<script>
							$( "span.menu-icon" ).click(function() {
								$( "ul.nav1" ).slideToggle( 300, function() {
									// Animation complete.
								});
							});
						</script>
						<!-- /script-for-menu -->
					</div>
				</div>
				<div class="clear"> </div>
				<div class="w3l_main_grid1_sub">
					<h2>${user.username}</h2>
				</div>
			</div>
			<div class="w3l_main_grid2">
				<div class="w3l_main_grid2">
					<div class="sap_tabs">

						<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
							<div class="resp-tabs-container">

								<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
									<div class="wthree_tab_grid">
										<h4>我的身份</h4>
											${user.role}

									</div>
								</div>
								<div class="tab-2 resp-tab-content" aria-labelledby="tab_item-2">
									<div class="wthree_tab_grid">
										<h4>创建的时间</h4>
										<fmt:formatDate value="${user.registTime}" pattern="yyyy-MM-dd hh:mm:ss"/>
									</div>
								</div>
								<div class="tab-3 resp-tab-content" aria-labelledby="tab_item-3">
									<div class="wthree_tab_grid">
										<h4>我的性别</h4>
										${user.gender}
									</div>
								</div>
								<div class="tab-4 resp-tab-content" aria-labelledby="tab_item-4">
									<div class="wthree_tab_grid">
										<h4>我的邮箱</h4>
											${user.email}
									</div>
								</div>
							</div>
							<ul class="resp-tabs-list">
								<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><h2><span class="w3ls_figure"> </span></h2></li>
								<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span class="w3ls_figure1"> </span></li>
								<li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span class="w3ls_figure2"> </span></li>
								<li class="resp-tab-item" aria-controls="tab_item-4" role="tab"><span class="w3ls_figure3"> </span></li>
								<div class="clear"> </div>
							</ul>
						</div>
					</div>

				<script src="${pageContext.request.contextPath}/js/easyResponsiveTabs.js" type="text/javascript"></script>
				<script type="text/javascript">
					$(document).ready(function () {
						$('#horizontalTab').easyResponsiveTabs({
							type: 'default', //Types: default, vertical, accordion
							width: 'auto', //auto or any width like 600px
							fit: true   // 100% fit in a container
						});
					});
				</script>

			</div>

		</div>

		<div class="wthree_footer_copy"></div>
			</div>
		</div>

	</body>

</html>